/**
 * Created by Freeman on 2018/1/20.
 */
import React from 'react'
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import PropTypes from 'prop-types'
import {path} from 'ramda'
import {COLOR, onePixel} from "../../config";
import TimeAgo from "./TimeAgo/index";

const TopicListRenderItem = ({item,navigation}) => {

  const image = path(['images', '0', 'filename'], item)

  return (
    <TouchableOpacity onPress={() => navigation.navigate('TopicProfile',{id:item.id,title:path(['post', 'title'], item)})} style={styles.itemContainer}>
      <View style={styles.imgTitle}>
        <Image style={styles.itemImage} source={image ? {uri: image} : require('../../res/img/zqc-icon-middle.png')}/>
        <Text style={styles.item}>{path(['post', 'title'], item)}</Text>
      </View>
      <View style={styles.infoContainer}>
        <Text style={styles.infoText}>{path(['from', 'source'], item)}</Text>
        <Text style={styles.infoText}>访问量{path(['reviews'], item)}</Text>
        <TimeAgo time={path(['created'], item)} style={styles.infoText}/>
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    backgroundColor:COLOR.backgroundLighter,
    padding:10,
    borderBottomWidth:onePixel,
    borderColor:COLOR.lineNormal,
  },
  imgTitle:{
    flexDirection:'row',
  },
  itemImage:{
    width: 99,
    height: 99,
    margin:1,
  },
  item: {
    flex:1,
    padding: 10,
    fontSize: 18,
    //height: 44,
  },
  infoContainer:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
  },
  infoText:{
    color:'#999'
  }
})

TopicListRenderItem.propTypes = {
  item: PropTypes.object,
}

export default TopicListRenderItem
